
<?php include('header.php');
if(!isset($_SESSION['user']))
{
	header('location:login.php');
}?>
<?php
session_start();

extract($_POST);


include('config.php');
$_SESSION['movie_name']=$movie_name;
$_SESSION['screen']=$screen;
$_SESSION['seats']=$seats;
$_SESSION['amount']=$amount;
$_SESSION['date']=$date;

?>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="Resource/validation/dist/css/bootstrapValidator.css"/>
<script type="text/javascript" src="Resource/validation/dist/js/bootstrapValidator.js"></script>
<script src="Resource/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="Resource/js/jquery.seat-charts.min.js"></script>
<script type="text/javascript">

    var sc

    $(document).ready(function() {


            $('#btn_success').click(function (){
            if($('#tickects_num').text()!=0){
            alert("您的票还未选择完毕！！！")
            return false;
        }

        })


        var $cart = $('#seats_chose'), //座位区

            $tickects_num = <?php echo$_SESSION['seats']?> //票数

            $total_price = $('#total_price'); //票价总额



        sc = $('#seat_area').seatCharts({

            map: [//座位结构图 a 代表座位; 下划线 "_" 代表过道

                'cccccccccc',

                'cccccccccc',

                '__________',

                'cccccccc__',

                'cccccccccc',

                'cccccccccc',

                'cccccccccc',

                'cccccccccc',

                'cccccccccc',

                'cc__cc__cc'

            ],

            naming: {//设置行列等信息

                top: false, //不显示顶部横坐标（行）

                getLabel: function(character, row, column) { //返回座位信息

                    return column;

                }

            },

            legend: {//定义图例

                node: $('#legend'),

                items: [

                    ['c', 'available', '可选座'],

                    ['c', 'unavailable', '已售出']

                ]

            },

            click: function() {

                if (this.status() == 'available') { //若为可选座状态，添加座位

                    if($tickects_num==0) {

                        alert("您的座位已经达到限额！")
                        return 'available';
                    }
                    $('<li>' + (this.settings.row + 1) + '排' + this.settings.label + '座</li>')

                        .attr('id', 'cart-item-' + this.settings.id)

                        .data('seatId', this.settings.id)

                        .appendTo($cart);

                    console.log(sc)

                        var NEW_tickects_num=$tickects_num-1;
                             $tickects_num=NEW_tickects_num
                            $('#tickects_num').text(NEW_tickects_num);

                            return 'selected';


                    // $tickects_num.text(sc.find('selected').length + 1); //统计选票数量

                    // $total_price.text(getTotalPrice(sc) + price);//计算票价总金额





                }
                else if (this.status() == 'selected') { //若为选中状态

                    var old_tickects_num=$tickects_num+1;

                    $tickects_num=old_tickects_num;


                    $('#tickects_num').text(old_tickects_num);//更新票数量

                    // $total_price.text(getTotalPrice(sc) - price);//更新票价总金额

                    $('#cart-item-' + this.settings.id).remove();//删除已预订座位



                    return 'available';

                } else if (this.status() == 'unavailable') { //若为已售出状态

                    return 'unavailable';

                } else {

                    return this.style();

                }



            }

        });

        //设置已售出的座位

        sc.get(['1_3', '1_4', '4_4', '4_5', '4_6', '4_7', '4_8']).status('unavailable');



    });



    function getTotalPrice(sc) { //计算票价总额

        var total = 0;

        sc.find('selected').each(function() {

            total += price;

        });

        return total;

    }

</script>




<link rel="stylesheet" type="text/css" href="Resource/css/jq22.css" />

<style type="text/css">

    .front{width: 300px;margin: 5px 32px 45px 32px;background-color: #f0f0f0;	color: #666;text-align: center;padding: 3px;border-radius: 5px;}

    .booking_area {float: right;position: relative;width:200px;height: 450px; }

    .booking_area h3 {margin: 5px 5px 0 0;font-size: 16px;}

    .booking_area p{line-height:26px; font-size:16px; color:#999}

    .booking_area p span{color:#666}

    div.seatCharts-cell {color: #182C4E;height: 25px;width: 25px;line-height: 25px;margin: 3px;float: left;text-align: center;outline: none;font-size: 13px;}

    div.seatCharts-seat {color: #fff;cursor: pointer;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}

    div.seatCharts-row {height: 35px;}

    div.seatCharts-seat.available {background-color: #B9DEA0;}

    div.seatCharts-seat.focused {background-color: #76B474;border: none;}

    div.seatCharts-seat.selected {background-color: #E6CAC4;}

    div.seatCharts-seat.unavailable {background-color: #472B34;cursor: not-allowed;}

    div.seatCharts-container {border-right: 1px dotted #adadad;width: 400px;padding: 20px;float: left;}

    div.seatCharts-legend {padding-left: 0px;position: absolute;bottom: 16px;}

    ul.seatCharts-legendList {padding-left: 0px;}

    .seatCharts-legendItem{float:left; width:90px;margin-top: 10px;line-height: 2;}

    span.seatCharts-legendDescription {margin-left: 5px;line-height: 30px;}

    .checkout-button {display: block;width:80px; height:24px; line-height:20px;margin: 10px auto;border:1px solid #999;font-size: 14px; cursor:pointer}

    #seats_chose {max-height: 150px;overflow-y: auto;overflow-x: hidden;width: 200px;}

    #seats_chose li{float:left; width:72px; height:26px; line-height:26px; border:1px solid #d3d3d3; background:#f7f7f7; margin:6px; font-size:14px; font-weight:bold; text-align:center}

</style>

  <?php
    include('form.php');
    $frm=new formBuilder;      
  ?>
<!--//检测提交字段是否符合规则-->



<div class="content">
	<div class="wrap">
		<div class="content-top">
			<h3>付款详情</h3>
            <form action="bank.php" method="post" id="form1">




			<div  style="margin-bottom:50px">

                <div class="container">

                    <h2 class="title">
                        <a >在线选座</a>
                    </h2>

                    <div class="demo clearfix">

                        <!---左边座位列表----->

                        <div id="seat_area">

                            <div class="front">屏幕</div>

                        </div>

                        <!---右边选座信息----->

                        <div class="booking_area">

                            <p>电影：<span><?php echo  $_SESSION['movie_name'];?></span></p>

                            <p>屏幕：<span><?php echo  $_SESSION['screen'];?>号屏幕</span></p>
                            <p>时间：<span><?php echo  $_SESSION['date'];?></span></p>

                            <p>座位：</p>

                            <ul id="seats_chose"></ul>

                            <p>票数：<span id="tickects_num"><?php echo  $_SESSION['seats'];?></span></p>

                            <p>总价：<b>￥<span id="total_price"><?php echo  $_SESSION['amount'];?></span></b></p>







                            <div id="legend"></div>

                        </div>

                    </div>

                </div>



            <div class="form-group" >
    <button class="btn btn-success" id="btn_success">
        确认下单
    </button>
            </div>

            </form>
</div>
</div>
			</div>
			
		<div class="clear"></div>	
		
	</div>
<?php include('footer.php');?>
</div>




<script>


        $(document).ready(function() {
            $('#form1').bootstrapValidator({
            fields: { 
            name: {
            verbose: false,
                validators: {notEmpty: {
                        message: 'The Name is required and can\'t be empty'
                    },regexp: {
                        regexp: /^[a-zA-Z ]+$/,
                        message: 'The Name can only consist of alphabets'
                    } } },
            number: {
            verbose: false,
                validators: {notEmpty: {
                        message: 'The Card Number is required and can\'t be empty'
                    },stringLength: {
                    min: 16,
                    max: 16,
                    message: 'The Card Number must 16 characters long'
                },regexp: {
                        regexp: /^[0-9 ]+$/,
                        message: 'Enter a valid Card Number'
                    } } },
            date: {
            verbose: false,
                validators: {notEmpty: {
                        message: 'The Expire Date is required and can\'t be empty'
                    } } },
            cvv: {
            verbose: false,
                validators: {notEmpty: {
                        message: 'The cvv is required and can\'t be empty'
                    },stringLength: {
                    min: 3,
                    max: 3,
                    message: 'The cvv must 3 characters long'
                },regexp: {
                        regexp: /^[0-9 ]+$/,
                        message: 'Enter a valid cvv'
                    } } }}
            });
            });

</script>
